<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';

const props = defineProps({
  num: {
    type: Number,
    default: 5
  }
});

const currentData = ref<any>({
  arr: ['zero', 'one', 'two', 'three', 'four','five']
});

</script>

<template>
  <section class="starUtil">
    <div class="lessen" :class="currentData.arr[props.num]"></div>
  </section>
</template>

<style lang="less" scoped>
.starUtil {
  width: .78rem;
  height: .15rem;
  background: url("../../../assets/images/star-icon-2.png") no-repeat;
  background-size: 1.33rem auto;
  background-position: 0rem -0.47rem;
  .lessen {
    width: 100%;
    height: 100%;
    background: url("../../../assets/images/star-icon-2.png") no-repeat;
    background-size: 1.33rem auto;
    &.zero {
      background-position: 0rem -0.62rem;
    }
    &.one {
      background-position: .16rem -0.62rem;
    }
    &.two {
      background-position: .32rem -0.62rem;
    }
    &.three {
      background-position: .48rem -0.62rem;
    }
    &.four {
      background-position: .64rem -0.62rem;
    }
    &.five {
      background-position: .8rem -0.62rem;
    }
  }
}
</style>

